<template>
	<view class="camera">

		<view class="yanshibox">
			<!-- style="background-color: #4e98dc;padding: 10rpx 20rpx;color: #ffffff;border-radius: 10rpx;" -->
			<view class="">
				<image src="/static/torchoff.png" v-if="flash!=='torch'" @click="changeTorch('torch')" mode="aspectFill"
					style="width: 60rpx;height: 60rpx;"></image>
				<image src="/static/torchon.png" v-else @click="changeTorch('auto')" mode="aspectFill"
					style="width: 60rpx;height: 60rpx;"></image>
			</view>
			<!-- <view class="yanshiwaibox" @click.stop
				style="padding: 4rpx 20rpx 4rpx 10rpx;font-size: 28rpx;border-radius: 2rpx;background-color: #dedede;border-radius: 12rpx;">
				<switch color="#4e98dc" style="transform:scale(0.7)" :checked="false" @change="isyanshi=!isyanshi;canpaizhao=true" />
				<text @click="changeyanshi">延时{{yanshitime1}}s</text>
			</view> -->
			<view class="yanshiwaibox" @click.stop
				style="padding: 10rpx 20rpx;font-size: 28rpx;border-radius: 2rpx;background-color: #000;border-radius: 12rpx;display: flex;align-items: center;">
				<image src="../static/yanshi.png" mode="aspectFill" style="width: 40rpx;height: 40rpx;" @click="showyanshitime=!showyanshitime"></image>
				<view class="" style="display: flex;align-items: center;color: #ffffff;font-size: 28rpx;" v-if="showyanshitime">
					<view class="" :style="{'margin': '0 20rpx','color':curIndex===0?'#4e98dc':'#ffffff'}" @click="curIndex=0;showyanshitime=false">
						关闭
					</view>
					<view class="" :style="{'margin': '0 20rpx','color':curIndex===1?'#4e98dc':'#ffffff'}" @click="curIndex=1;showyanshitime=false">
						3s
					</view>
					<view class="" :style="{'margin': '0 20rpx','color':curIndex===2?'#4e98dc':'#ffffff'}" @click="curIndex=2;showyanshitime=false">
						10s
					</view>
				</view>
				<view class="" style="display: flex;align-items: center;color: #ffffff;font-size: 28rpx;" v-else @click="showyanshitime=!showyanshitime">
					<view class="" :style="{'margin': '0 20rpx','color':curIndex===0?'#ffffff':'#ffffff'}" v-if="curIndex===0">
						关闭
					</view>
					<view class="" :style="{'margin': '0 20rpx','color':curIndex===0?'#ffffff':'#ffffff'}" v-if="curIndex===1">
						3s
					</view>
					<view class="" :style="{'margin': '0 20rpx','color':curIndex===0?'#ffffff':'#ffffff'}" v-if="curIndex===2">
						10s
					</view>
				</view>
			</view>
			<view class="">
				<!-- <image :src="flash==='on'?'/static/flashon2.png':'/static/flashon.png'" @click="changeTorch('on')" 
				 mode="aspectFill" style="width: 60rpx;height: 60rpx;margin-left: 20rpx;" ></image> -->
				<image src="/static/flash_auto.png" @click="changeTorch('off')" v-if="flash=='auto'||flash=='torch'"
					mode="aspectFill" style="width: 60rpx;height: 60rpx;margin-left: 20rpx;"></image>

				<image src="/static/flashoff.png" v-else @click="changeTorch('auto')" mode="aspectFill"
					style="width: 60rpx;height: 60rpx;margin-left: 20rpx;"></image>
			</view>
		</view>
		<view class="modal" style="display: none;" @click.stop="showyanshimodal=fasle">
			 <!-- v-if="showyanshimodal&&isyanshi" -->
			<view class="yanshiinputbox" @click.stop>
				<view class="yanshifont1">
					请输入延时拍照的时间（秒）
				</view>
				<view class="" style="margin: 30rpx 0 60rpx;display: flex;align-items: center;justify-content: center;">
					<input type="text" v-model="yanshitime" class="yanshiinput" />秒
				</view>
				<view class=""
					style="margin-top: 30rpx;display: flex;align-items: center;justify-content: space-around;">
					<button type="plain" style="width: 180rpx;height: 60rpx;line-height: 60rpx;
					font-size: 28rpx;" @click="cancel">取消</button>
					<button type="primary" style="width: 180rpx;height: 60rpx;line-height: 60rpx;font-size: 28rpx;"
						@click="confirm">确认</button>
				</view>
			</view>
		</view>
		<!-- 相机组件 -->
		<camera v-if="isAuth" :device-position="devPosition" :flash="flash" @error="error" />
		<view class="footer">
			<view class="back" v-if="back">
				<view @click="Back" style="background:red">
					<image src="/static/camear.png" mode="aspectFill" />
				</view>
			</view>
			<view class="album" v-else>
				<view @click="Album"
					style="background:#efefef;width:100rpx;height:100rpx;border-radius:50%;display:flex;align-items:center;justify-content: center;">
					<image src="/static/xiangce.png" mode="aspectFill" style="width: 50rpx;height: 50rpx;" />
				</view>
			</view>
			<view class="takePhoto">
				<view @click="TakePhoto" style="background:#888888;width:120rpx;height:120rpx;border-radius:50%;
				display:flex;align-items:center;justify-content: center;">
					<image src="/static/camear.png" mode="aspectFill" style="width:60rpx;height:60rpx" />
				</view>
			</view>
			<view class="devPosition">
				<!-- @click="CameraPosition" -->
				<view @click="goback" style="background:#efefef;width:100rpx;height:100rpx;border-radius:50%;
				display:flex;align-items:center;justify-content: center;">
					<!-- <image src="/static/refresh.png" mode="aspectFill"  
					style="width:50rpx;height:50rpx"/> -->
					<image src="/static/back.png" mode="aspectFill" style="width:50rpx;height:50rpx" />
				</view>
			</view>
		</view>
		<!--  -->
		<view class="" v-if="!canpaizhao&&num>0&&curIndex>0" style="position: fixed;left:0;top:0;width: 100vw;
		height:100vh;display:flex;
		align-items:center;font-size:80rpx;color:#ff0000;
		font-weight:800;text-align:center;justify-content: center;">
			{{num}}
		</view>
	</view>
</template>
<script>
	export default {
		props: {
			/**
			 * 是否授权调用相机
			 * @param {default:false}  
			 */
			isAuth: {
				type: Boolean,
				default: false
			},
			/**
			 * 前后置摄像头状态
			 * @param {default:""}  
			 */
			devPosition: {
				type: String,
				default: ""
			},
			/**
			 * 是否开启返回（开启返回按钮，选择相册功能将禁用，仅可拍照）
			 * @param {default:false}  
			 */
			back: {
				type: Boolean,
				default: false
			},
			/**
			 * 图片预览临时路径
			 * @param {default:""}  
			 */
			tempImagePath: {
				type: String,
				default: ""
			}
		},
		data() {
			return {
				curIndex:0,
				showyanshitime:false,
				showflash: true,
				flash: 'auto',
				yanshitime1: 3,
				yanshitime: 3,
				num: 3,
				canpaizhao: true,
				timer: null,
				showyanshimodal: false,
				isyanshi: false,
			}
		},
		onShow() {
		},
		onHide() {
			clearInterval(this.timer)
		},
		methods: {
			changeTorch(v) {
				this.flash = v
				if (v == 'auto') {
					uni.showToast({
						title: '闪光灯已自动',
						icon: 'none'
					})
				} else if (v == 'on') {
					uni.showToast({
						title: '闪光灯已开启',
						icon: 'none'
					})
				} else if (v == 'off') {
					uni.showToast({
						title: '闪光灯已关闭',
						icon: 'none',
					})
				} else if (v == 'torch') {
					uni.showToast({
						title: '闪光灯已常亮',
						icon: 'none',
					})
				}
			},
			goback() {
				uni.navigateBack()
			},
			cancel() {
				this.showyanshimodal = false
			},
			confirm() {
				this.num = this.yanshitime
				this.yanshitime1 = this.yanshitime
				this.showyanshimodal = false
			},
			changeyanshi() {
				this.showyanshimodal = true
			},
			// 打开授权设置界面
			OpenSetting() {
				const that = this
				let promise = new Promise((resolve, reject) => {
					uni.showModal({
						title: '授权',
						content: '请先授权获取摄像头权限',
						success(res) {
							if (res.confirm) {
								uni.openSetting({
									success(res) {
										if (res.authSetting['scope.camera']) { // 用户打开了授权开关
											resolve(true)
										} else { // 用户没有打开授权开关， 继续打开设置页面
											that.OpenSetting().then(res => {
												resolve(true)
											})
										}
									},
									fail(res) {
										console.log(res);
									}
								})
							} else if (res.cancel) {
								that.OpenSetting().then(res => {
									resolve(true)
								})
							}
						}
					})
				})
				return promise;
			},
			/**
			 * 返回回调函数方法
			 * @param {Back}  
			 */
			Back() {
				const that = this
				that.$emit('Back')
			},
			/**
			 * 选择相册照片回调函数方法
			 * @param {tempFilePaths}  
			 */
			async Album() {
				const that = this
				uni.chooseImage({
					sourceType: ['album'],
					success(res) {
						if (res.errMsg == 'chooseImage:ok') {
							that.$emit('Album', res.tempFilePaths[0])
						}
					},
					fail(res) {
						console.log(res);
					}
				})
			},
			/**
			 * 拍照回调函数方法
			 * @param {tempImagePath}  
			 */
			TakePhoto() {
				const that = this
				if (!this.canpaizhao) {
					return
				}
				// this.flash='auto'
				this.canpaizhao = false
				if (this.curIndex>0) {
					// that.num=10
					this.num = this.curIndex==1?3:10
					if (this.num > 1) {
						this.timer = setInterval(function() {
							if (that.num > 1) {
								that.num = that.num - 1
							} else {
								that.DoTakePhoto()
								clearInterval(that.timer)
								clearInterval()
								console.log('num', that.num);
							}
						}, 1000)
					} else {
						that.DoTakePhoto()
					}
				} else {
					console.log(555)
					that.DoTakePhoto()
				}

			},
			DoTakePhoto() {
				const that = this
				const ctx = uni.createCameraContext()
				that.canpaizhao = true
				ctx.takePhoto({
					quality: 'normal',
					success: (res) => {
						console.log('success-res', res)
						let flash = that.flash
						that.flash= ''
						console.log('success-resthat.flash', that.flash)
						that.flash=flash
						console.log('success-resthat.flash', that.flash)
						that.$emit('TakePhoto', res.tempImagePath)
					},
					fail: (res) => {
						console.log('err', res)
						let flash = that.flash
						that.flash= ''
						that.flash=flash
					}
				})
			},
			/**
			 * 切换前后置摄像头回调函数方法
			 * @param {CameraPosition,{true}}  
			 */
			CameraPosition() {
				this.$emit("CameraPosition")
			},
		}
	}
</script>
<style lang="scss" scoped>
	.camera {
		justify-content: center;
		width: 100%;
		height: 100%;
		position: relative;

		.modal {
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background-color: rgba(0, 0, 0, 0.3);
			z-index: 99999999;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.yanshiinputbox {
			width: 90%;
			padding: 30rpx;
			box-sizing: border-box;
			background-color: #ffffff;
			border-radius: 20rpx;
		}

		.yanshifont1 {
			text-align: center;
			font-size: 30rpx;
			font-weight: 700;
			line-height: 80rpx;
		}

		.yanshiinput {
			margin-right: 20rpx;
			border: 1rpx solid #999999;
			height: 80rpx;
			box-sizing: border-box;
			padding: 0 20rpx;
			border-radius: 20rpx;
			display: inline-block;
			width: 200rpx;
		}

		.yanshibox {
			z-index: 99999999;
			position: fixed;
			top: 178rpx;
			left: 0;
			width: 100%;
			display: flex;
			box-sizing: border-box;
			padding: 0 40rpx;
			justify-content: space-between;
		}

		.preview-img {
			width: 100%;
			height: 100%;
			position: absolute;
			top: 0;
			left: 0;
			z-index: 1;
		}
	}

	.camera camera {
		height: 100vh;
	}

	.footer {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		background: #FFF;
		border-radius: 10rpx 10rpx 0 0;
		display: flex;
		justify-content: center;
		align-items: center;
		padding-top: 20rpx;
		padding-bottom: 30rpx;
		box-shadow: 0 0 15rpx rgba(244, 244, 244, 0.4);
		z-index: 5;

		.back,
		.album,
		.takePhoto,
		.devPosition {
			margin: auto;

			image {
				width: 75rpx;
				height: 75rpx;
			}
		}

		.album {
			image {
				width: 85rpx;
				height: 85rpx;
			}
		}

		.takePhoto {
			image {
				width: 120rpx;
				height: 120rpx;
			}
		}

	}
</style>